<template>
  <div class="contain-edit">
    <div class="header">
      <p>操作日志>>查看详情</p>
      <el-button class="link" type="primary">
        <router-link to="/operationList" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <div class="wrap-menu">
            <div class="menu-list">
                <div class="menu-name">操作描述</div>
                <div class="menu-info">{{info.title}}</div>
            </div>
            <div class="menu-list">
                <div class="menu-name">操作人</div>
                <div class="menu-info">{{info.userName}}</div>
            </div>
            <div class="menu-list">
                <div class="menu-name">操作时间</div>
                <div class="menu-info">{{info.gmtCreated}}</div>
            </div>
    
        </div>
    </div>
  </div>
  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");

  export default {
    data() {
      return {
        id:'',
        info: {},
      }
    },
    mounted() {
      this.id  = this.$router.currentRoute.query.id;
      this.getDetail(this.id);
    },
    methods: {
      getDetail(id){
        let url = CONSTANT.URL.OPSLOG.DETAIL;
        let param = {
          id:id
        };
        common.requestAjax(url,{},param,(res)=>{
          this.info = res.data.bussData;
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .item-left {
    float: left;
    width: 120px;
    padding-left: 20px;
    padding-right: 10px;
    // height: 40px;
    line-height: 40px;
    text-align: right;
    border-right: 1px solid #dedede;
  }
  .item-right {
    // height: 40px;
    // line-height: 40px;
    padding-left: 20px;
    float: left;
  }
  .backage {
    height: auto;
    border: 1px solid #dedede;
    border-top: none;
  }
  .analyse{
    margin-left: 151px;
    height:530px;
    padding-top: 20px;
    display: flex;
  }
  .pic{
    width:330px;
    height:530px;
    // background-color:yellowgreen;
    display: inline-block;
    margin-right: 30px;
    padding-left: 20px;
    .avatar-info{
      .avatar{
        width:100px;
        height:100px;
        background-color:#626262;
        margin-top:50px;
        border-radius:50%;
        float:left;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        // float:left;
        // margin-top:50px;
        margin-left:10px;
        padding: 60px 20px;
      }
    }
  }
  .pic-font{
    border-left: 5px solid #999;
    width: 100px;
    height: 40px;
    line-height: 40px;
    // background-color: pink;
    // margin-left: 15px;
    margin-bottom: 15px;
    display: block;
  }
  .wins{
    display: inline-block;
    height: 350px;
    flex: 1;
  }
  .match{
    list-style:none;
    padding-left:20px;
    margin-top:20px;
    .match-item{
      width: 300px;
      height:50px;
      background-color: #eee;
      margin-bottom:30px;
    }
  }
  #chart{
    width:300px;
    height:300px;
  }
  .wrap-menu{
        border-right: 1px solid #dedede;
        border-left: 1px solid #dedede;
        .menu-list{
                border-bottom: 1px solid #dedede;
                display: -webkit-box;
                display: box;
                display: -moz-box;
                /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                display: -webkit-flex;
                /* 新版本 - 适配Chrome */
                display: flex;
                -webkit-box-align: center;
                -moz-align-items: center;
                -webkit-align-items: center;
                align-items: center;
                min-height: 80px;
                font-size: 14px;
                cursor: pointer;
                &:hover{
                background-color: #f5f7fa;
                }
                .menu-name{
                display: -webkit-box;
                display: box;
                display: -moz-box;
                /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                display: -webkit-flex;
                    /* 新版本 - 适配Chrome */
                display: flex;
                -webkit-box-align: center;
                -moz-align-items: center;
                -webkit-align-items: center;
                align-items: center;
                    -webkit-box-justify-content:  flex-end;
                -moz-align-justify-content:  flex-end;
                -webkit-align-justify-content:  flex-end;
                justify-content:  flex-end;
                    flex: 1;
                    -webkit-flex: 1;
                    text-align: right;
                    min-height: 80px;
                    border-right: 1px solid #dedede;
                    color: #909399;
                    padding: 10px  30px 10px 0;
                }
            .menu-info{
                display: -webkit-box;
                display: box;
                display: -moz-box;
                /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                display: -webkit-flex;
                    /* 新版本 - 适配Chrome */
                display: flex;
                -webkit-box-align: center;
                -moz-align-items: center;
                -webkit-align-items: center;
                align-items: center;
                    -webkit-box-justify-content:  flex-start;
                -moz-align-justify-content:  flex-start;
                -webkit-align-justify-content:  flex-start;
                justify-content:  flex-start;
                min-height: 80px;
                    flex: 3;
                    -webkit-flex: 3;
                    padding: 10px  0px 10px 30px;;
                    .image-info{
                        width: 100px;
                    cursor: pointer;
                        margin-right: 10px;
                    }
                    img{
                        height: 80px;
                        border-radius: 50%;
                        -webkit-border-radius: 50%;
                    }
                }
        }
    }
  .honor {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    // background-color: yellow;
    .honor-img{
      width: 70px;
      height: 70px;
      padding: 30px 40px 0px 40px;
    }
    .honor-span{
      width: 40px;
      height: 20px;
      border: 1px solid #ccc;
      display: block;
      margin-left: 55px;
    }
    .honor-text{
      display: block;
      text-align: center;
      font-size: 14px;
    }
  }

</style>


